<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery.min.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">后台管理</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       style="font-size: 20px;" aria-expanded="false">功能 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li style="font-size: 15px;"><a href="{:url('admin/admin/administrator')}">管理员管理</a></li>
                        <li style="font-size: 15px;"><a href="{:url('admin/admin/admin')}">用户管理</a></li>
                        <li style="font-size: 15px;"><a href="#"> 首页管理</a></li>
                        <li style="font-size: 15px;"><a href="#"> 列表管理 </a></li>
                        <li style="font-size: 15px;"><a href="#"> 详情页管理 </a></li>
                        <li style="font-size: 15px;"><a href="{:url('admin/Position/index')}"> 角色配置 </a></li>
                        <li style="font-size: 15px;"><a href="{:url('admin/Position/authority')}"> 权限管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


{block name="menu"}

<!--add模态框-->

<div style="margin-top:200px;" id='add' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <h1 style="text-align: center; font-size:20px;color:white; ">添加用户</h1>

        <div class="form-group">
            <label for="inputEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email"
                       class="form-control" name="mobile" id="inputEmail" placeholder="请输入电话">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label>
            <div style="margin-top:30px;" class="col-sm-10">
                <input type="email"
                       class="form-control" name="email" id="inputEmail3" placeholder="请输入邮箱">
            </div>
        </div>
        <button type="button" style="margin-top: 30px;margin-left: 400px;"
                onclick="doadd()" class="btn btn-success">提交
        </button>
    </div>
</div>
<!--end模态框-->

<!--edit模态框-->

<div id="editbox" style="margin-top:150px;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <h1 style="text-align: center; font-size:20px;color:white; ">编辑用户</h1>
        <input type="hidden" id="id" name="id">

        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email"
                       class="form-control" name="editTel" id="editTel" placeholder="请输入电话">
            </div>
        </div>

        <div class="form-group">
            <label for="inputEmail" class="col-sm-2 control-label">Email</label>
            <div style="margin-top:30px;" class="col-sm-10">
                <input type="email"
                       class="form-control" name="editEmail" id="editEmail" placeholder="请输入邮箱">
            </div>
        </div>
        <button type="button" style="margin-top: 30px;margin-left: 400px;"
                onclick="doedit()" class="btn btn-success">提交
        </button>
    </div>
</div>
<!--end模态框-->


<h1 style="text-align: center; font-size:50px;">用户管理</h1>

<div class="table-responsive">
    <table class="table" id="table2">
        <tr>
            <th width="5%" class="active">编号</th>
            <th width="25%" class="success">电话</th>
            <th width="25%" class="warning">邮箱</th>
            <th width="10%" class="danger">
                <button data-toggle="modal" data-target="#add" class="btn btn-info">
                    添加
                </button>
            </th>
        </tr>
        {volist name="da" key="k" id="v" }
        <tr>
            <td class="active">{$v['id']}</td>
            <td class="success">{$v['mobile']}</td>
            <td class="warning">{$v['email']}</td>

            <td class="danger">
                <button onclick="edit(this)" data-target="#editbox" data-toggle="modal" class="btn btn-success">编辑
                </button>
                <button onclick="dodel(this)" class="btn btn-primary">删除</button>
            </td>
        </tr>
        {/volist}
    </table>

    {$da->render()}

</div>

<script>
    //添加用户
    function doadd() {

        var mobile = $("input[ name='mobile']").val();
        var email = $("input[ name='email']").val();

        if (!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))) {
            return alert('手机格式不对');
        }
        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(email)) {
            return alert("邮箱格式不对");
        }
        // AJAX('post', "{:url('index/admin/doadd')}", {"mobile": mobile, "email": email});

        $.ajax({
            method: 'post',
            url: "{:url('admin/admin/doadd')}",
            data: {"mobile": mobile, "email": email},
            dataType: 'json',
            success: function (data) {
                alert(data['error']['message']);
                location.reload();

            },
            error: function () {
                alert('服务器繁忙,请重试');
                location.reload();

            }
        });
    }

    //编辑用户页面
    function edit(b) {
        var id = $(b).parents('tr').find("td:eq(0)").text();

        $.ajax({
            method: 'post',
            url: "{:url('admin/admin/edit')}",
            data: {
                "id": id,
            },
            dataType: 'json',
            success: function (data) {
                $("#editTel").html("");
                $("#editEmail").html("");
                $("#editTel").val(data['mobile']);
                $("#editEmail").val(data['email']);
                $("#id").val(id);

            },
            error: function () {
                alert('服务器繁忙,请重试');
            }
        });
    }


    //执行编辑用户
    function doedit() {
        var id = $("input[ name='id']").val();
        var editTel = $("input[ name='editTel']").val();
        var editEmail = $("input[ name='editEmail']").val();
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(editTel))) {
            return alert('手机格式不对');
        }
        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(editEmail)) {
            return alert("邮箱格式不对");
        }
        AJAX('post', "{:url('admin/Admin/doEdit')}", {"id": id, "mobile": editTel, "email": editEmail});
    }

    //执行删除
    function dodel(c) {
        var id = $(c).parents('tr').find("td:eq(0)").text();

        $.ajax({
            method: 'post',
            url: "{:url('admin/admin/dodel')}",
            data: {
                "id": id,
            },
            async: false,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                //删除一个节点
                location.reload();

            },
            error: function () {
                alert('服务器繁忙,请重试');
            }
        });
    }

    function AJAX(method = null, url, dataInfo = null) {
        $.ajax({
            method: method,
            url: url,
            dataType: 'json',
            data: dataInfo,
            async: false,
            success: function (data) {
                alert(data['error']['message']);
            },
            error: function () {
                alert('服务器繁忙,请重试');
            }
        });

    }
</script>
{/block}
</body>
</html>
